<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset=UTF-8>
		<title>文章的增删改查操作</title>
		<%@ include file="../comm/required.jspf"%>
		<link rel="stylesheet" href="${ctx}/statics/article/css/article-crud.css">
	</head>
	<body>
		<div style="padding: 30px; margin-top: 50px">
			<form method="post" action="${ctx}/article/list.html" id="searchForm" class="form-inline" role="form" style="margin-bottom: 20px">
				<div class="form-group">
					<label class="sr-only" for="title">请输入文章名：</label>
					<input type="text" class="form-control" name="title" value="${title}" placeholder="按文章名查找">
				</div>
				<button type="submit" class="btn btn-default">搜索</button>
			</form>
			<div style="margin-bottom: 20px"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#addDig">新增</button></div>
			<table style="table-layout:fixed" class="table table-condensed table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>标题</th>
						<th>内容</th>
						<th>发布人</th>
						<th>阅读次数</th>
						<th>发表时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${articlePageModel.list}" var="article" varStatus="vs">
					<tr>
						<td>${vs.count}</td>
						<td style="display:none"><input type="hidden" value="${article.id}"></td>
						<td class="text-ellipsis">${article.title}</td>
						<td class="text-ellipsis">${article.content}</td>
						<td>${article.code}</td>
						<td>${article.readTimes}</td>
						<td><fmt:formatDate value="${article.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
						<td>
							<button type="button" onclick="article.operate.updateArticle(this)" class="btn btn-primary" data-toggle="modal" data-target="#updateDig">修改</button>
							<button type="button" onclick="article.operate.deleteArticle(this)" class="btn btn-danger">删除</button>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<!-- 新增 -->
			<div class="modal fade bs-example-modal-lg" id="addDig" tabindex="-1"
				role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content" style="padding: 30px">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">×</span><span class="sr-only">Close</span>
							</button>
							<h4 class="modal-title" id="mySmallModalLabel">新增内容</h4>
						</div>
						<div class="modal-body">
							<form role="form" action="${ctx}/article/add.html" method="post" >
								<input type="hidden" name="article.id">
								<div class="form-group">
									<label for="_title">标　题</label>
									<input type="text" class="form-control" id="_title" name="article.title">
								</div>
								<div class="form-group">
									<label for="_content">内　容</label>
									<input type="text" class="form-control" id="_cotent" name="article.content">
								</div>
								<div class="form-group">
									<label for="_authorCode">发布人</label>
									<input type="text" class="form-control" id="_authorCode" name="authorCode">
								</div>
								<div class="form-group">
									<label for="_readTimes">阅读数</label>
									<input type="text" class="form-control" id="_readTimes" name="article.read_times">
								</div>
								<div class="form-group">
									<label for="_createTime">发表时间</label> 
									<input type="text" class="form-control" id="_createTime" name="article.create_time">
								</div>
								<div class="form-group">
									<label for="_cateId">类别ID</label> 
									<input type="text" class="form-control" id="_cateId" name="article.category_id" value="1" readonly="readonly">
								</div>
								<div class="form-group">
									<label for="_userId">用户ID</label> 
									<input type="text" class="form-control" id="_userId" name="article.user_id" value="1" readonly="readonly">
								</div>
								<button type="submit" class="btn btn-default">提交添加</button>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- 修改 -->
			<div class="modal fade bs-example-modal-lg" id="updateDig" tabindex="-1"
				role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content" style="padding: 30px">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">×</span><span class="sr-only">Close</span>
							</button>
							<h4 class="modal-title" id="mySmallModalLabel">修改内容</h4>
						</div>
						<div class="modal-body">
							<form role="form" action="${ctx}/article/update.html" method="post" id="updateForm">
								<input type="hidden" name="article.id">
								<div class="form-group">
									<label for="newTitle">标　题</label>
									<input type="text" class="form-control" id="newTitle" name="article.title">
								</div>
								<div class="form-group">
									<label for="newContent">内　容</label>
									<input type="text" class="form-control" id="newCotent" name="article.content">
								</div>
								<div class="form-group">
									<label for="newAuthorCode">发布人</label>
									<input type="text" readonly="readonly" class="form-control" id="newAuthorCode" name="authorCode">
								</div>
								<div class="form-group">
									<label for="newReadTimes">阅读数</label>
									<input type="text" class="form-control" id="newReadTimes" name="article.read_times">
								</div>
								<div class="form-group">
									<label for="newCreateTime">发表时间</label> 
									<input type="text" class="form-control" id="newCreateTime" name="article.create_time">
								</div>
								<button type="submit" class="btn btn-default">提交更改</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		<!-- 分页 -->
			<nav>
				<ul class="pagination" id="pageWrapper">
					<!-- class="disabled" -->
					<li ><a onclick="go(${articlePageModel.first})" href="javascript:;">«</a></li>
					<li ><a onclick="go(${articlePageModel.pre})" href="javascript:;">&lt;</a></li>
					<script>
						var pageWrapper = document.getElementById("pageWrapper");
						var pageNo = "${articlePageModel.pageNumber}";
						var totalPages = "${articlePageModel.totalPage}";
						var currentPageMaxNumbers;
						if(pageNo < 5) {
							currentPageMaxNumbers = totalPages < 5 ? totalPages : 5;
							for(var i = 1; i <= currentPageMaxNumbers; i++) {
								if(i == pageNo) {
									document.write("<li class='active'><a href='javascript:;'>" + i + "</a></li>");
								} else {
									document.write("<li><a href='javascript:;' onclick='go(" + i + ")'>" + i + "</a></li>");
								}
							}
						} else {
							currentPageMaxNumbers = totalPages < parseInt(pageNo) + 2 ? totalPages : parseInt(pageNo) + 2;
							for(var i = parseInt(pageNo) - 2; i <= currentPageMaxNumbers; i++) {
								if(i == pageNo) {
									document.write("<li class='active'><a href='javascript:;'>" + i + "</a></li>");
								} else {
									document.write("<li><a href='javascript:;' onclick='go(" + i + ")'>" + i + "</a></li>");
								}
							}
						}
					</script>
					<li><a onclick="go(${articlePageModel.next})" href="javascript:;">&gt;</a></li>
					<li><a onclick="go(${articlePageModel.last})" href="javascript:;">»</a></li>
					<script>
						var searchForm = document.getElementById("searchForm");
			    		function go(pageNo) {
			    			searchForm.action = '<%=request.getContextPath()%>/article/list/' + pageNo + '.html';
			    			searchForm.submit();
			    		}
					</script>
				</ul>
			</nav>
		</div>
		<script type="text/javascript" src="${ctx}/statics/article/js/article-crud.js"></script>
	</body>
</html>